<!--
  @Author cj
  @Date: 2021/01/26/ 14:52
-->
<template>
  <el-table-column :label="coloumnHeader.label"
                   :prop="coloumnHeader.label"
                   :width="coloumnHeader.width"
                   :fixed="coloumnHeader.fixed"
                   :formatter="coloumnHeader.formatter"
                   :min-width="coloumnHeader.minWidth"
                   :show-overflow-tooltip="coloumnHeader.overflowTooltip===undefined?true:coloumnHeader.overflowTooltip"
                   :class-name="coloumnHeader.className"
                   :label-class-name="coloumnHeader.labelClassName"
                   header-align="left"
                   align="left">
    <template v-for="(col_1_item, index) in coloumnHeader.children">
      <my-column v-if="col_1_item.children && col_1_item.children.length"
                 :key="col_1_item.id"
                 :coloumn-header="col_1_item"
                 @handleCommand="handleCommand">
        <!-- 自定义显示内容列 -->
        <div v-for="(slotName,index) in multColumnsSlotCellName"
             :slot="slotName"
             :key="index"
             slot-scope="scope">
          <slot :name="slotName" :row="scope.row"></slot>
        </div>
      </my-column>
      <el-table-column v-else
                       :key="col_1_item.name"
                       :label="col_1_item.label"
                       :prop="col_1_item.prop"
                       :min-width="col_1_item.minWidth"
                       :width="col_1_item.width"
                       :fixed="col_1_item.fixed"
                       :formatter="col_1_item.formatter"
                       :show-overflow-tooltip="col_1_item.overflowTooltip===undefined?true:col_1_item.overflowTooltip"
                       :class-name="col_1_item.className"
                       :label-class-name="col_1_item.labelClassName"
                       header-align="left"
                       align="left">
        <!-- 表头 -->
        <template slot="header" slot-scope="scope">
          <slot v-if="col_1_item.slotColumnHeader" :name="col_1_item.slotColumnHeader"></slot>
          <template v-else-if="col_1_item.headerFilter">
            <el-dropdown class="header-filter-dropdown" size="mini">
                    <span class="el-dropdown-link">
                      {{col_1_item.label}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, filterIndex) in col_1_item.headerFilterList"
                  :key="filterIndex"
                  :command="item[col_1_item.headerFilterCommand]">
                  <div @click="handleCommand(col_1_item.prop, index,item)">
                    <i v-if="item.icon" class="iconfont" :class="item.icon"></i>{{item[col_1_item.headerFilterLabel]}}
                  </div>
                </el-dropdown-item>
                <el-dropdown-item
                  command="asc"
                  v-if="col_1_item.headerFilterSort"
                  :divided="col_1_item.headerFilterList && col_1_item.headerFilterList.length>0">
                  <div @click="handleCommand(col_1_item.prop, index, {command: 'asc'})">
                    <i class="iconfont iconpaixu1"></i>升序
                  </div>
                </el-dropdown-item>
                <el-dropdown-item
                  command="des"
                  v-if="col_1_item.headerFilterSort">
                  <div @click="handleCommand(col_1_item.prop, index, {command: 'des'})">
                    <i class="iconfont iconpaixu2"></i>降序
                  </div>
                </el-dropdown-item>
                <!--<el-dropdown-item
                  command="lock"
                  v-if="col_1_item.headerFilterLock && !col_1_item.fixed"
                  divided>
                  <div @click="handleCommand(col_1_item.prop, index, {command: 'lock'})">
                    <i class="iconfont icon-lock"></i>锁定此列
                  </div>
                </el-dropdown-item>-->
                <el-dropdown-item
                  command="lock"
                  v-if="col_1_item.headerFilterLock && col_1_item.fixed"
                  divided>
                  <div @click="handleCommand(col_1_item.prop, index, {command: 'unLock'})">
                    <i class="iconfont icon-unlock"></i>取消锁定
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else>{{col_1_item.label}}</template>
        </template>
        <!-- 表体内容显示 -->
        <template slot-scope="scope">
          <div v-if="col_1_item.slotCell"  :slot="col_1_item.slotCell" >
            <slot :name="col_1_item.slotCell" :row="scope.row"> </slot>
          </div>
          <template v-else>
            {{scope.row[col_1_item.prop]}}
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table-column>

</template>
<script>
  export default {
    name: 'MyColumn',
    props: {
      multColumnsSlotCellName:{
        type: Array,
        default: ()=> []
      },
      coloumnHeader: {
        type: Object,
        required: true
      }
    },
    methods:{
      handleCommand(columnName, columnIndex, data){
        this.$emit('handleCommand',columnName, columnIndex, data, true )
      },
    }
  };
</script>
